<template>
    <div class="box">
        <el-row>
            <el-col :span='24'>
                <h2 class="title">本市科研专利运营情况</h2>
            </el-col>
            <el-col :span="5" class="plate">
                <h3>转移</h3>
                <p>{{$ThousandthSign(data.zhuanyi)}}</p>
            </el-col>
            <el-col :span="5"  class="plate">
                <h3>质押</h3>
                <p>{{$ThousandthSign(data.zhiya)}}</p>
            </el-col>
            <el-col :span="5"  class="plate">
                <h3>许可</h3>
                <p>{{$ThousandthSign(data.xuke)}}</p>
            </el-col>
            <el-col :span="5"  class="plate">
                <h3>无效</h3>
                <p>{{$ThousandthSign(data.wuxiao)}}</p>
            </el-col>
            <el-col :span="4"  class="plate">
                <h3>复审</h3>
                <p>{{$ThousandthSign(data.fushen)}}</p>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <pie></pie>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span='24'>
                <h2 class="title">本市质押专利情况</h2>
            </el-col>
            <el-col :span="24">
                <pledge></pledge>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span='24'>
                <h2 class="title">专利纠纷情况</h2>
            </el-col>
            <el-col :span="24">
                <dispute></dispute>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import pie from './child/pie'
import pledge from "./child/pledge"
import dispute from './child/dispute'
export default {
    components:{pie, pledge, dispute},
    data(){
        return {
            data:{
                zhuanyi:'',
                zhiya: '',
                xuke:'',
                wuxiao: '',
                fushen:''
            }
        }
    },
    computed:{
        ...mapState(['levelCode'])
    },
    mounted(){
        this.initText()
    },
    methods:{
        initText(val){
            this.$post(this.$Url.finance.cityAnalysis,{
                "code": this.levelCode,
                "aggs": [
                    {
                        "field": "legal_zhuanyi",
                        "type": "base"
                    },
                    {
                        "field": "legal_zhiya",
                        "type": "base"
                    },
                    {
                        "field": "legal_xuke",
                        "type": "base"
                    },
                    {
                        "field": "legal_wuxiao",
                        "type": "base"
                    },
                    {
                        "field": "legal_fushen",
                        "type": "base"
                    }
                ]
            }).then(res=>{
                if(res.data){
                    this.data.zhuanyi = res.data[0].multilevel['sterms#AGG'][0]['doc_count']
                    this.data.zhiya = res.data[0].multilevel['sterms#AGG1'][0]['doc_count']
                    this.data.xuke = res.data[0].multilevel['sterms#AGG2'][0]['doc_count']
                    this.data.wuxiao = res.data[0].multilevel['sterms#AGG3'][0]['doc_count']
                    this.data.fushen = res.data[0].multilevel['sterms#AGG4'][0]['doc_count']
                }
            }).catch(e=>{console.log(e)})
        }
    }
}
</script>
<style lang="scss" scoped>
.box{
    text-align:left;
    .el-row{
        background:#fff;
        margin-bottom:20px;
    }
    .title{
        font-size:16px;
        line-height:40px;
        border-bottom:1px solid #ddd;
        padding-left:20px;
        color:#535260;
    }
    h3{
        color:#5c5a6f;
        font-weight:bold;
    }
    .plate{
        height:90px;
        padding-left:20px;
        padding-top:10px;
        h3,p{
            line-height:30px;
        }
        p{
            color:#514caa;
            font-size:14px;
            font-weight:bold;
            font-size:18px;
        }
    }
    
}
</style>